<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 视口（作用于移动端，能适配平板、手机页面） -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>喜邦-首页</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/base.css"> <!--加在bootstrap后面-->
	<link rel="stylesheet" href="css/ie10-viewport-bug-workaround.css">	

	<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
	<script src="js/ie-emulation-modes-warning.js"></script>

	<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!-- 头部导航 -->
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">	<!--bootstrap容器-->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
          	<!-- 改为logo -->
          	<img src="images/logo.png" alt="">
          </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#about">公司</a></li>
            <li><a href="#contact">案例</a></li>
            <li><a href="#contact"><img src="images/logo.png" alt=""></a></li>
            <li><a href="#contact">团队</a></li>
            <li><a href="#contact">资讯</a></li>
            <li><a href="#contact">联系</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- 广告轮播图 -->
    <div id="carousel-example-generic" class="carousel slide ad" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="images/ad1.jpg" alt="...">
          <div class="carousel-caption">
            广告图1
          </div>
        </div>
        <div class="item">
          <img src="images/ad1.jpg" alt="...">
          <div class="carousel-caption">
            广告图2
          </div>
        </div>
        <div class="item">
          <img src="images/ad1.jpg" alt="...">
          <div class="carousel-caption">
            广告图3
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <!-- 内容1部分 -->
    <div class="content1">
        <div class="content">
          <div class="title">
            <h3>喜邦品牌十年深耕化妆品产业</h3>
            <p>THE COSMETICS INDUSTRY</p>
          </div>
        </div>
    </div>

    <div class="content1">
        <div class="content list">
          <img src="images/icon1.png" class="pull-left" alt="">
          <p>戴斗笠收获者，帮助超过200家化妆品行业客户提供过设计与策略服务。</p>
          <div class="clearfix"></div>
        </div>
    </div>

    <div class="content1">
        <div class="content list">
          <img src="images/icon1.png" class="pull-left" alt="">
          <p>戴斗笠收获者，帮助超过200家化妆品行业客户提供过设计与策略服务。</p>
          <div class="clearfix"></div>
        </div>
    </div>

    <div class="content1">
        <div class="content list">
          <img src="images/icon1.png" class="pull-left" alt="">
          <p>戴斗笠收获者，帮助超过200家化妆品行业客户提供过设计与策略服务。</p>
          <div class="clearfix"></div>
        </div>
    </div>

    <!-- 内容2部分 -->
    <div class="content2">
      <div class="content">

        <div class="title pull-left">
          <h3>喜邦品牌十年深耕化妆品产业</h3>
          <p>THE COSMETICS INDUSTRY</p>
        </div>

        <div class="right pull-right">
          <span>近期作品</span>  <!--active 当前的，被选中的-->
          <span class="active">全部作品</span>
        </div>

        <div class="clearfix"></div>  <!--清除浮动-->

        <img src="images/zp_pic1.jpg" alt="" class="zp img-responsive">
        <div class="desc"> <!-- 介绍 -->
          <h3>爱典</h3>
          <p>以守护女性美好肌肤为终极目标的专业护肤品牌-Aidian爱典，为缔造女性梦寐以求的无瑕、水润、细嫩的肌肤，全新研制出植物密码奢养幻白护肤系列...</p>
          <img src="images/arrow.jpg" alt="" class="arrow">
        </div>
        <a href=" " class="more">MORE</a>
      </div>
    </div>
    
<div class="content3">
  <div class="content">

    <div class="title pull-left">
      <h3>资深专家顾问团队，100大新锐设计师阵容</h3>
      <p>RECOMMENDED DESIGNER</p>
    </div>

    <div class="right pull-right">
      <span>精英团队</span>  <!--active 当前的，被选中的-->
      <span class="active">所有团队</span>
    </div>

    <div class="clearfix"></div>  <!--清除浮动-->

    <div class="people">
      <ul class="list fl">
        <li class="fl"><img src="images/xb_home_24.jpg" alt="" class=""></li>
        <li class="fl"><img src="images/xb_home_26.jpg" alt="" class=""></li>
        <li class="fl"><img src="images/xb_home_28.jpg" alt="" class=""></li>
        <li class="fl"><img src="images/xb_home_30.jpg" alt="" class=""></li>
      </ul>  
      <div class="desc fl">
        <img class="fl" src="images/xb_home_21.jpg" alt="" class="img-responsive">
        <div class="desc2 fl">
          <h1>杨昊昊</h1>
          <h3>高级平面设计师</h3>
          <p>2003年毕业于haliluya设计 学院...</p>
          <img src="images/arrow.png" alt="" class="arrow">
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
    <a href=" " class="more">MORE</a>

  </div>
</div>

    <div class="content4">
      <div class="content">

        <div class="title pull-left">
          <h3>最新资讯</h3>
          <p>NEWS INFORMATION</p>
        </div>

        <div class="right pull-right">
          <span>公司新闻</span>
          <span class="active">化妆品新闻</span>
        </div>

        <div class="clearfix"></div>

      </div>
    </div>

<div class="content4 active">
  <div class="content">
    <div class="list1">
      <img src="./images/fengjing.png" alt="">
      <div class="text">
        <h1>本土日化上市需要等待时机</h1>
        <h3>2016-03-18</h3>
        <p>日化企业的上市会给企业带来更为广阔的利润空间，而上市过程过需要很多的资金， 但是很...</p>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>
<div class="content4">
  <div class="content">
    <div class="list2">
      <ul>
        <li>
          <div class="date"><span>11</span><span>03</span></div>
          <img src="./images/fengjing2.png" alt="">
          <div class="text">
            <h3>中国以规定化妆品生产企业建立需要全过程</h3>
            <p>国家食品药品监督总局17日就《化妆品生产许可工作指南（暂行）》和《化妆品生产 许可检查》...</p>
          </div>
        </li>
        <li>
          <div class="date"><span>07</span><span>03</span></div>
          <img src="./images/fengjing3.png" alt="">
          <div class="text">
            <h3>实体店该如何面对电商冲击</h3>
            <p>移动互联网的到来，电商的出现，使历史发展的必然，任何人都没办法阻止这股潮流，想躲...</p>
          </div>
        </li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
</div>
<div class="content4">
  <div class="content">
    <a href=" " class="more">MORE</a>
  </div>
</div>




<div class="foorter">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-xs-12">
        <img src="images/logo2.png" alt="" class="logo">
      </div>
      <div class="col-md-5 col-xs-12 center">
        <p>喜邦品牌十年深耕化妆品产业</p>
        <p>友情链接：<a href="">中国雅芳</a><a href="">百雀羚</a><a href="">自然堂</a><a href="">巴黎欧莱雅</a><a href="">谷歌</a></p>
        <p>广州喜邦品牌顾问&设计有限公司版权所有<a href="">粤ICP备0754673</a></p>
      </div>
      <div class="col-md-4 col-xs-12 right">
        <p>E-mail: <a href="mailto:758057640@qq.com">758057640@qq.com</a></p>
        <p><img src="./images/tel.png" alt=""> 全国免费咨询热线：<a href="tel:40000-138-136">40000-138-136</a></p>
        <p>地址：广州市白云区新市齐富路联富大厦6018</p>
      </div>
    </div>
  </div>
</div>




    <!-- 栅格系统的结构（看文档，看怎么使用？） -->

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	  <script src="js/bootstrap.min.js"></script>
</body>
</html>